<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.img{
				width: 93px;
				height: 123px;
				overflow: hidden;
				
			}
			.img img{
					width: 100%;
					height: 93px;
				}
			.but{
				height: 30px;
				width: 93px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.but .bt{
				text-align: center;
				background: gray;
				margin: 2px;
				cursor: pointer;
				border: 1px solid darkgray;
				border-radius: 7px;
			}
			.but .bt:hover{
				background: gold;
				color: skyblue;
			}
			.img .eleHidden{
				height: 0px;
				transition: 1s;
			}
			.imgSee{
				height: 93px;
				width: 93px;
				overflow: hidden;
				transition: 1s;
			}
			.blank{
				height: 1000px;
			}
			.toTop{
				width: 30px;
				height: 90px;
				background: black;
				color: blanchedalmond;
				text-align: center;
				cursor: pointer;
				position: fixed;
				right: 30px;
				bottom: 100px;
			}	
		</style>
	</head>
	<body>
		<div class="img ">
			<div class="imgSee">
				<img src="img/10-dog.png" alt=""  />
			</div>
		</div>
		<div class="but">
			<div id="bt1" class="bt ">隐藏</div>
			<div id="bt2" class="bt">展开</div>
			<div id="bt3" class="bt">试一试</div>
		</div>
		<div class="blank"></div>
		<div class="toTop">回到顶部</div>
		<script type="text/javascript">
			var  bt1 = document.querySelector("#bt1");
			var  bt2 = document.querySelector("#bt2");
			var  bt3 = document.querySelector("#bt3");
			var  img = document.querySelector(".imgSee");
			bt1.addEventListener("click",function(){
				img.classList.add("eleHidden");
			})
			bt2.addEventListener("click",function(){
				img.classList.remove("eleHidden");
			})
			bt3.addEventListener("click",function(){
				img.classList.toggle("eleHidden");
			})
			var  toTop = document.querySelector(".toTop");
				toTop.addEventListener("click",function(){
					var timer = setInterval(function(){
						scrollBy(0,-10);
						if(pageYOffset==0){
							 clearInterval(timer);
						   }
						
					},20);
				})
		</script>
	</body>
</html>
